<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 1415px;
            height: 515px;
            position: relative;
            background-color: #b5f0ee;
            margin: auto;
        }

        .zuo_zuo>img {
            width: 350px;
            height: 515px;
        }

        .zuo_zuo_xia {
            width: 300px;
            height: 70px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            align-content: space-between;
            position: relative;
            top: -100px;
            left: 20px;
        }

        .zuo_zuo_xia div {
            width: 70px;
            height: 30px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #cccccc;
            color: #fff;
        }

        .zuo_you {
            width: 610px;
            height: 500px;
        }

        .a1,
        .a1 img {
            width: 505px;
            height: 250px;
        }

        .a1 {
            position: absolute;
            top: 5px;
            left: 350px;
        }

        .a2,
        .a3,
        .a4,
        .a5 {
            width: 250px;
            height: 250px;
            background-color: #fff;
        }

        .a2 img,
        .a3 img,
        .a4 img,
        .a5 img {
            width: 200px;
            height: 200px;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .a2 {
            position: absolute;
            top: 5px;
            left: 860px;
        }

        .a3 {
            position: absolute;
            top: 260px;
            left: 350px;
        }

        .a4 {
            position: absolute;
            top: 260px;
            left: 605px;
        }

        .a5 {
            position: absolute;
            top: 260px;
            left: 860px;
        }

        .zuo_you font {
            position: absolute;
            top: 10px;
            left: 20px;
        }

        .zuo_you span {
            position: absolute;
            top: 30px;
            left: 20px;
            font-size: 14px;
            color: #cccccc;
        }

        .you {
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 515px;
            display: flex;
            flex-wrap: wrap;
        }

        .you div {
            position: relative;
            width: 150px;
            height: 171px;
        }

        .you div img {
            width: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .b1 {
            background-color: #ffe5ee;
            font-size: 10px;
        }

        .b2 {
            background-color: #fff3e7;
            font-size: 10px;
        }

        .b3 {
            background-color: #e8f9ef;
            font-size: 10px;
        }

        .b4 {
            background-color: #f9eeec;
            font-size: 10px;
        }

        .b5 {
            background-color: #eff8ff;
            font-size: 10px;
        }

        .b6 {
            background-color: #e3f8f3;
            font-size: 10px;
        }

        .you span {
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 14px;
        }

        .you font {
            position: absolute;
            top: 40px;
            left: 10px;
            color: #6f7776;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="zuo">
            <div class="zuo_zuo">
                <img src="./img/img/perrier.jpg">
                <div class="zuo_zuo_xia">
                    <div>进口饼干</div>
                    <div>进口坚果</div>
                    <div>进口糖块</div>
                    <div>进口咖啡</div>
                    <div>进口水饮</div>
                    <div>进口方便面</div>
                </div>
            </div>
            <div class="zuo_you">
                <div class="a1">
                    <img src="./img/img/love_gift.jpg" alt="">
                </div>
                <div class="a2">
                    <font>进口休闲零食</font><br>
                    <span>3件5折</span>
                    <img src="./img/img/snacks.jpg" alt="">
                </div>
                <div class="a3">
                    <font>弗列洛巧克力</font><br>
                    <span>3件5折</span>
                    <img src="./img/img/chocolate.jpg" alt="">
                </div>
                <div class="a4">
                    <font>进口粮油米面</font><br>
                    <span>3件5折</span>
                    <img src="./img/img/grain_oil.jpg" alt="">
                </div>
                <div class="a5">
                    <font>进口水饮中调</font><br>
                    <span>3件5折</span>
                    <img src="./img/img/drink_water_rich.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="you">
            <div class="b1">
                <span style="color: #d67294;">进口美护</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_beauty_care.png" alt="">
            </div>
            <div class="b2">
                <span style="color: #e4a45a;">进口母婴</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_infant_mom.png" alt="">
            </div>
            <div class="b3">
                <span style="color: #69b4b0;">进口生鲜</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_fresh.png" alt="">
            </div>
            <div class="b4">
                <span style="color: #97856e;">进口家居</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_home.png" alt="">
            </div>
            <div class="b5">
                <span style="color: #5fa0d0;">进口厨卫清洁</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_kitchen_cleaner.png" alt="">
            </div>
            <div class="b6">
                <span style="color: #84bdc6;">进口保健品</span>
                <font>BEAUTY</font>
                <img src="./img/img/import_health_care_products.png" alt="">
            </div>
        </div>

    </div>
</body>

</html>